<template>
	<view class="warp">
		<view class="header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				智能工作助手
			</view>
			<view class="mycard alert-msg-box" @click="openMsg">
				<view class="msg_ico">
					<image src="/static/images/icon/ring.png" mode="widthFix"></image>
				</view>
				<view class="msg_content">
					<view class="tit">消息提醒</view>
					<view class="nums">您目前有{{datainfo.msg_count}}条未读消息</view>
				</view>
				<view class="msg_btn">
					<view class="msg_more_btn">查看更多</view>
				</view>
			</view>
		</view>
		<view class="mycard yeji">
			<view class="mycard-title">
				我的业绩（元）
			</view>
			<view class="mycard">
				<view class="my-money">
					<view class="today" @click="openPage" data-page="../myOrder/myOrder">
						<text class="number red">{{datainfo.today_money}}</text>
						<text class="sub_number red">零售：{{datainfo.today_money}}</text>
						<text class="sub_number red">储值卡:{{datainfo.today_recharge}}</text>
						<text>今日收款</text>
					</view>
					<view class="month" @click="openPage" data-page="../myOrder/myOrder?t=4">
						<text class="number">{{datainfo.month_money}}</text>
						<text class="sub_number red">零售：{{datainfo.month_money}}</text>
						<text class="sub_number red">储值卡:{{datainfo.month_recharge}}</text>
						<text>本月</text>
					</view>
				</view>
				<view class="my-money">
					<view class="today" @click="openPage" data-page="../myOrder/myServer">
						<text class="number red">{{datainfo.today_server}}</text>
						<text>今日服务</text>
					</view>
					<view class="month" @click="openPage" data-page="../myOrder/myServer?t=4">
						<text class="number">{{datainfo.month_server}}</text>
						<text>本月</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zhibiao">
			<view class="title">
				行为指标
			</view>
			<view class="tableheader">
				<view>指标</view>
				<view>今日完成</view>
				<view>本月完成</view>
				<view>本月目标</view>
			</view>
			<view class="tableone" @click="switchTab" data-page="../customer/customer">
				<view>新增客户</view>
				<view v-if="datainfo.target">{{datainfo.target.day1}}</view>
				<view v-else>0</view>
				<view v-if="datainfo.target">{{datainfo.target.over1}}</view>
				<view v-else>0</view>
				<view v-if="datainfo.target">{{datainfo.target.target1}}</view>
				<view v-else>0</view>
			</view>
			 <view class="tableone" style="border-left: rgb(252,93,74) 4px solid;" @click="switchTab" data-page="../customer/customer">
				<view>增效客户</view>
				<view v-if="datainfo.target">{{datainfo.target.day2}}</view>
				<view v-else>0</view>
				<view v-if="datainfo.target">{{datainfo.target.over2}}</view>
				<view v-else>0</view>
				<view v-if="datainfo.target">{{datainfo.target.target2}}</view>
				<view v-else>0</view>
			</view>
			 <view class="tableone" style="border-left: rgb(255,192,79) 4px solid;" @click="switchTab" data-page="../customer/customer">
				<view>联系客户</view>
				<view v-if="datainfo.target">{{datainfo.target.day3}}</view>
				<view v-else>0</view>
				<view v-if="datainfo.target">{{datainfo.target.over3}}</view>
				<view v-else>0</view>
				<view v-if="datainfo.target">{{datainfo.target.target3}}</view>
				<view v-else>0</view>
			</view> 
		</view>
		<!-- <view class="mycard rank">
			<tui-list-cell @click="openRanking" :arrow="true" arrowColor="danger" :unlined="true" :size="32">
				<view class="tui-item-box" >
					<image src="../../static/images/icon/rank.png" class="rank_ico" mode="widthFix"></image>
					<view class="center">
						<view>员工业务排名</view>
						<text class="tui-list-cell_name">点击查看员工业务排名</text>
					</view>
				</view>
			</tui-list-cell>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top:0,
				datainfo:{
					month_money:0,
					month_server:0,
					today_money:0,
					today_server:0,
					msg_count:0,
					target:null
				}
			}
		},
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow() {
			this.tui.chkAuth();
			this.getData();
		},
		methods: {
			openMsg(){
				uni.navigateTo({
					url:"../message/message"
				})
			},openRanking(){
				uni.navigateTo({
					url:'../rankings/rankings'
				})
			},
			switchTab(e){
				uni.switchTab({
					url:e.currentTarget.dataset.page,
				})
			},openPage(e){
				uni.navigateTo({
					url:e.currentTarget.dataset.page,
				})
			},
			getData(){
				this.tui.get('user/api/workdata').then(res=>{
					this.datainfo = res.data;
				});
			}
			
		}
	}
</script>

<style>
	.header{
		background-repeat: no-repeat;
		background-size: 100% 80%;
	}
	.alert-msg-box{
		display: flex;
	}
	.alert-msg-box .msg_ico{
		padding: 10upx 30upx;
	}
	/* .alert-msg-box .msg_content {width: 100%;} */
	.alert-msg-box .msg_content .tit{font-weight: 700;color: #383838;}
	.alert-msg-box .msg_content .nums{font-weight: 400;font-size: 28upx;color: #888888;padding-top: 10upx;}
	.alert-msg-box .msg_btn{margin-left: auto;}
	.alert-msg-box .msg_btn .msg_more_btn{
		border-radius: 40upx;border:1px solid #fb2c42;
		    padding: 10upx 30upx;
		    font-size: 28upx;
		    color: #fb2c42;
		    margin: 20upx 30upx 0 0;}
	.msg_ico image{width: 28px;}
	.my-money{display: flex;margin-bottom: 30upx;}
	.my-money>view{width: 50%;}
	.my-money>view>text{width: 100%;display: inline-block;text-align: center;font-size: 24upx;color: #656565;padding: 10rpx;}
	.my-money >view>text.number{font-size: 36upx;font-weight: 700;color: #383838;}
	.red{color:#fb2c42 !important;}
	.my-money .rankings_ico image{width: 35px;}
	.rank .rank_ico{width: 30px;}
	.rank{
		padding: 0;
	}
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.tui-item-box .center{padding: 0 30upx;}
	.tui-item-box .center text{font-size: 24upx;color: #656565;}
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	.tui-flex-box{
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	/* 指标 */
	.zhibiao{
		margin: 40upx 30upx;
	}
	.zhibiao .title{
		font-weight: 700;
		font-size: 36upx;
		color: #383838;
	}
	.zhibiao .tableheader{
		display: flex;
		color: #656565;
		font-size: 28upx;
		text-align: center;
		padding: 20upx 0;
	}
	.zhibiao .tableheader>view{
		width: 25%;
	}
	.zhibiao .tableone{
		display: flex;
		font-size: 30upx;
		text-align: center;
		color:#383838;
		font-weight: 700;
		background-color: #FFF;
		border-radius: 20upx;
		padding: 30upx 0;
		margin-bottom: 20upx;
		border-left: #65b6fc 4px solid;
		}
	.zhibiao .tableone>view{width: 25%;}
</style>
